layui.use(['table', 'form', 'laydate'], function () {
    let table = layui.table;
    let form = layui.form;
    let laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
        elem: '#start' //指定元素
    });

    //执行一个laydate实例
    laydate.render({
        elem: '#end' //指定元素
    });


    // 创建渲染实例
    table.render({
        elem: '#table'
        , url: '/back/user/all' // 此处为静态模拟数据，实际使用时需换成真实接口
        , height: 'full-200' // 最大高度减去其他容器已占有的高度差
        , cellMinWidth: 80
        , page: true //开启分页
        , cols: [[
            {field: 'id', fixed: 'left', width: 60, title: 'ID', sort: true}
            , {field: 'username', width: 100, title: '用户名'}
            , {
                field: 'email',
                title: '邮箱 <i class="layui-icon layui-icon-email"></i>',
                hide: 0,
                width: 120,
                edit: 'text'
            }
            , {field: 'sex', width: 70, title: '性别', sort: true}
            , {field: 'phone', width: 120, title: '手机号'}
            , {field: 'birthday', width: 120, title: '生日'}
            , {field: 'address', width: 200, title: '地址'}
            , {
                field: 'enable', width: 120, title: '启用停用', templet: function (d) {
                    return d.enable === 1 ? '启用' : '停用'
                }
            }
            , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
        ]]
    })

    //触发单元格工具事件
    table.on('tool(table)', function (obj) { // 双击 toolDouble
        let data = obj.data;
        //console.log(data);
        if (obj.event === 'del') {
            layer.confirm('真的删除行么', function (index) {
                $.ajax({
                    url: '/back/user/delete',
                    data: data,
                    async: false,
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        if (res.count === 1) {
                            layer.alert("删除成功");
                            obj.del();
                            layer.close(index);

                        } else {
                            layer.alert("删除失败")
                        }
                    }
                });
            });
        } else if (obj.event === 'edit') {
            sessionStorage.setItem("userId", data.id);
            xadmin.open('编辑用户', '/html/user/user-edit.html', 600, 400)
            // layer.open({
            //     title: '编辑',
            //     type: 1,
            //     area: ['80%', '80%'],
            //     content: '<div style="padding: 16px;">自定义表单元素</div>'
            // });
        } else if (obj.event === 'password') {
            sessionStorage.setItem("userId", data.id);
            xadmin.open('修改密码', '/html/user/user-password.html', 600, 400)
            // layer.open({
            //     title: '密码修改',
            //     type: 1,
            //     area: ['80%', '80%'],
            //     content: '<div style="padding: 16px;">自定义表单元素</div>'
            // });
        }
    });

    form.on('submit(sreach)', function (res) {
        let data = res.field;
        //console.log(data);
        table.render({
            elem: '#table'
            , url: '/back/user/all' // 此处为静态模拟数据，实际使用时需换成真实接口
            ,where:data
            , height: 'full-200' // 最大高度减去其他容器已占有的高度差
            , cellMinWidth: 80
            , page: true //开启分页
            , cols: [[
                {field: 'id', fixed: 'left', width: 60, title: 'ID', sort: true}
                , {field: 'username', width: 100, title: '用户名'}
                , {
                    field: 'email',
                    title: '邮箱 <i class="layui-icon layui-icon-email"></i>',
                    hide: 0,
                    width: 120,
                    edit: 'text'
                }
                , {field: 'sex', width: 70, title: '性别', sort: true}
                , {field: 'phone', width: 120, title: '手机号'}
                , {field: 'birthday', width: 120, title: '生日'}
                , {field: 'address', width: 200, title: '地址'}
                , {
                    field: 'enable', width: 120, title: '启用停用', templet: function (d) {
                        return d.enable === 1 ? '启用' : '停用'
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
        })
        return false;
    })
});